<template>
    <div class="addContact">
      <el-row>
        <el-col :span="24"><h2>添加联系人</h2></el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form :model="add_info" :rules="rules" ref="info" label-width="80px" class="demo-ruleForm">
            <el-form-item label="姓名" prop="name">
              <el-input  v-model="add_info.name" placeholder="请输入姓名" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话号码" prop="tel">
              <el-input type="tel" v-model="add_info.tel" placeholder="电话号码" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="分组" prop="cate">
              <el-select v-model="add_info.cate" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handelAdd('info')">添加</el-button>
              <el-button @click="handelConsel">取消</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
      </el-row>
    </div>
</template>

<script>
  import { Message } from 'element-ui';
    export default {
        name: "addContact",
        data() {
          var checkTel=(rule, value, callback) => {
            if(/^[1]+[3,5,8]+\d{9}$/.test(value)){
              callback();
            }else{
              callback(new Error('电话号码不正确'));
            }
          };
            return {
              name:'',
              tel:'',
              options: [
                {
                value: '家人',
                label: '家人'
              }, {
                value: '朋友',
                label: '朋友'
              }, {
                value: '同学',
                label: '同学'
              }, {
                value: '同事',
                label: '同事'
              }],
              cate:'',
              add_info:{},
              rules:{
                name:[
                  { required: true, message: '请输入名称', trigger: 'blur' },
                ],
                tel:[
                  { required: true, message: '请输入电话', trigger: 'blur' },
                  { validator: checkTel, trigger: 'blur'}
                ],
                cate:[
                  { required: true, message: '请选择联系人分组', trigger: 'blur' },
                ]
              }
            }
        },
        methods: {
          handelAdd(){
            //添加联系人:验证电话号码是否正确
            this.$refs['info'].validate((valid) => {
              if (valid) {
                //验证通过进行添加操作
                this.add_info.userId=JSON.parse(window.localStorage.getItem('logInfo')).id+'';
                this.$http.toPost('mail/add',this.add_info)
                  .then(resp=>{
                    if(resp.resultCode===0){
                      Message.success({message:'恭喜您，添加成功!!!',duration:'2000'})
                      this.add_info={};
                    }
                  })
              } else {
                Message.error({message:"添加失败",duration:'2000'})
                return false;
              }
            });
          },

          handelConsel(){
            //取消
            this.add_info={};
          }
        },
        computed: {},
        components: {},
        mounted() {
        }
    }
</script>

<style lang="less" scoped>
  .addContact{
    width: 50%;
    margin: 0 auto;
    margin-top: 50px;
    color:#6A6371 ;
    h2{
      text-align: center;
      font-size: 30px;
      color:#6A6371 ;
      margin-bottom: 30px;
    }
    .add-main{
      width: 65%;
      margin: 0 auto;
      .name,.tel{
        text-align: right;
        font-size: 16px;
        margin-top: 10px;
        .el-input{
          width: 80%;
        }
      }
      .cate{
        margin-top: 10px;
      }
    }


  }
</style>
